<template>
  <el-container class="mall_goods-tool_good-category">
    <el-main>
      <div class="content">
        <div>
          <el-button class="title no-border fr" type="text" size="mini" @click="openDialog(0, true)">新增类目</el-button>
          <el-input v-model="filter0" placeholder="搜索一级类目" />
          <el-tree
            ref="tree0"
            class="filter-tree"
            :data="list0"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode0"
            :highlight-current="true"
            :expand-on-click-node="false"
            :allow-drop="allowDrop"
            draggable
            @node-drop="handleDrop0"
          >
            <div slot-scope="{ node, data }" class="tree-list" @click="chooseLv(0, data.index, data)">
              <div>{{ data.code }}.{{ node.label }}</div>
              <div>
                <el-switch v-model="data.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @click.stop.native @change="changeState(0, data, data.index)" />
                <el-button v-if="data.publishStatus ==1 " type="text" size="mini" @click.stop="edit(0, data.id, false)">详情</el-button>
                <el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="edit(0, data.id, true)">修改</el-button>
                <!-- el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="del(0, data)">删除</el-button -->
              </div>
            </div>
          </el-tree>
        </div>
        <div>
          <el-button class="title no-border fr" type="text" size="mini" @click="openDialog(1, true)">新增类目</el-button>
          <el-input v-model="filter1" placeholder="搜索二级类目" />
          <el-tree
            ref="tree1"
            class="filter-tree"
            :data="list1"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode1"
            :highlight-current="true"
            :expand-on-click-node="false"
            :allow-drop="allowDrop"
            draggable
            @node-drop="handleDrop1"
          >
            <div slot-scope="{ node, data }" class="tree-list" @click="chooseLv(1, data.index, data)">
              <div>{{ data.code }}.{{ node.label }}</div>
              <div>
                <el-switch v-model="data.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @click.stop.native @change="changeState(1, data, data.index)" />
                <el-button v-if="data.publishStatus ==1 " type="text" size="mini" @click.stop="edit(1, data.id, false)">详情</el-button>
                <el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="edit(1, data.id, true)">修改</el-button>
                <!-- el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="del(1, data)">删除</el-button -->
              </div>
            </div>
          </el-tree>
        </div>
        <div>
          <el-button class="title no-border fr" type="text" size="mini" @click="openDialog(2, true)">新增类目</el-button>
          <el-input v-model="filter2" placeholder="搜索三级类目" />
          <el-tree
            ref="tree2"
            class="filter-tree"
            :data="list2"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode2"
            :highlight-current="true"
            :expand-on-click-node="false"
            :allow-drop="allowDrop"
            draggable
            @node-drop="handleDrop2"
          >
            <div slot-scope="{ node, data }" class="tree-list" @click="chooseLv(2, data.index, data)">
              <div>{{ data.code }}.{{ node.label }}</div>
              <div>
                <el-switch v-model="data.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @click.stop.native @change="changeState(2, data, data.index)" />
                <el-button v-if="data.publishStatus ==1 " type="text" size="mini" @click.stop="edit(2, data.id, false)">详情</el-button>
                <el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="edit(2, data.id, true)">修改</el-button>
                <!-- el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="del(2, data)">删除</el-button -->
              </div>
            </div>
          </el-tree>
        </div>
        <div>
          <el-button class="title no-border fr" type="text" size="mini" @click="openDialog(3, true)">新增类目</el-button>
          <el-input v-model="filter3" placeholder="搜索四级类目" />
          <el-tree
            ref="tree3"
            class="filter-tree"
            :data="list3"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode3"
            :highlight-current="true"
            :expand-on-click-node="false"
            :allow-drop="allowDrop"
            draggable
            @node-drop="handleDrop3"
          >
            <div slot-scope="{ node, data }" class="tree-list" @click="chooseLv(3, data.index, data)">
              <div>{{ data.code }}.{{ node.label }}</div>
              <div>
                <el-switch v-model="data.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @click.stop.native @change="changeState(3, data, data.index)" />
                <el-button v-if="data.publishStatus ==1 " type="text" size="mini" @click.stop="edit(3, data.id, false)">详情</el-button>
                <el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="edit(3, data.id, true)">修改</el-button>
                <!-- el-button v-if="data.publishStatus !=1 " type="text" size="mini" @click.stop="del(3, data)">删除</el-button -->
              </div>
            </div>
          </el-tree>
        </div>
      </div>
      <el-dialog v-if="addDialog" width="40%" :title="title" :visible.sync="addDialog" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addParams" :rules="addRules" label-width="9.5rem">
          <el-row>
            <el-col :span="22">
              <el-form-item prop="name" label="类目名称：">
                <el-input v-model="addParams.name" :disabled="!diabledEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item prop="code" label="类目编码：">
                <el-input v-model="addParams.code" :disabled="!diabledEdit && (title === '编辑')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="nav" label="是否显示在导航栏：">
                <div>
                  <el-radio-group v-model="addParams.nav" :disabled="!diabledEdit">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分类图标：" prop="pic">
                <Upload ref="upload" class="load-cont" :limit="1" :file-list="fileList" :disabled="!diabledEdit" :file-filter="['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP']" @setKey="setKey" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="描述：">
                <el-input v-model="addParams.remark" type="textarea" :disabled="!diabledEdit" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button v-if="diabledEdit" type="primary" @click="clickSure">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import Upload from '@/components/upload'
import { categoryList, addCategory, editCategory, delCategory, searchCategory, changeCategory, dragGoodCategory } from '@/api/mall/goodsTool'

export default {
  components: {
    Upload
  },
  data() {
    return {
      fileList: [],
      title: '',
      addDialog: false,
      diabledEdit: true,
      addParams: {
        parentId: '',
        code: '',
        fullCode: '',
        name: '',
        nav: '1',
        pic: '',
        remark: ''
      },
      addRules: {
        code: [{ required: true, message: '请输入类目编码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入类目名称', trigger: 'blur' }],
        nav: [{ required: true, message: '请选择是否显示在导航栏', trigger: 'change' }]
      },
      filter0: '',
      filter1: '',
      filter2: '',
      filter3: '',
      list0: [],
      list1: [],
      list2: [],
      list3: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      active0: -1,
      active1: -1,
      active2: -1,
      active3: -1,
      parentId0: 0,
      parentId1: '',
      parentId2: '',
      parentId3: '',
      chooseOpenDialog: ''
    }
  },
  watch: {
    filter0(val) {
      this.$refs.tree0.filter(val)
    },
    filter1(val) {
      this.$refs.tree1.filter(val)
    },
    filter2(val) {
      this.$refs.tree2.filter(val)
    },
    filter3(val) {
      this.$refs.tree3.filter(val)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleDrop0(draggingNode, dropNode, dropType, ev) {
      this.active1 = -1
      this.active2 = -1
      this.active3 = -1
      this.list1 = []
      this.list2 = []
      this.list3 = []
      this.parentId1 = ''
      this.parentId2 = ''
      this.parentId3 = ''
      this.handleDrop(draggingNode, dropNode, dropType, ev, 0)
    },
    handleDrop1(draggingNode, dropNode, dropType, ev) {
      this.active2 = -1
      this.active3 = -1
      this.list2 = []
      this.list3 = []
      this.parentId2 = ''
      this.parentId3 = ''
      this.handleDrop(draggingNode, dropNode, dropType, ev, 1)
    },
    handleDrop2(draggingNode, dropNode, dropType, ev) {
      this.active3 = -1
      this.list3 = []
      this.parentId3 = ''
      this.handleDrop(draggingNode, dropNode, dropType, ev, 2)
    },
    handleDrop3(draggingNode, dropNode, dropType, ev) {
      this.handleDrop(draggingNode, dropNode, dropType, ev, 3)
    },
    handleDrop(draggingNode, dropNode, dropType, ev, type) {
      let ids = []
      if (type === 0) {
        ids = this.list0.map(item => item.id)
      } else if (type === 1) {
        ids = this.list1.map(item => item.id)
      } else if (type === 2) {
        ids = this.list2.map(item => item.id)
      } else {
        ids = this.list3.map(item => item.id)
      }
      dragGoodCategory({ ids })
    },
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          // 向上拖拽 || 向下拖拽
          return type === 'prev' || type === 'next'
        }
      } else {
        // 不同级进行处理
        return false
      }
    },
    filterNode0(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    filterNode1(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    filterNode2(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    filterNode3(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    changeState(i, info, index) {
      if (i === 0) {
        this.list0[index].publishStatus = info.publishStatus === 1 ? 0 : 1
      } else if (i === 1) {
        this.list1[index].publishStatus = info.publishStatus === 1 ? 0 : 1
      } else if (i === 2) {
        this.list2[index].publishStatus = info.publishStatus === 1 ? 0 : 1
      } else {
        this.list3[index].publishStatus = info.publishStatus === 1 ? 0 : 1
      }
      changeCategory({ id: info.id, publishStatus: info.publishStatus === 1 ? 0 : 1 }).then(res => {
        if (i === 0) {
          this.list0[index].publishStatus = info.publishStatus === 1 ? 0 : 1
        } else if (i === 1) {
          this.list1[index].publishStatus = info.publishStatus === 1 ? 0 : 1
        } else if (i === 2) {
          this.list2[index].publishStatus = info.publishStatus === 1 ? 0 : 1
        } else {
          this.list3[index].publishStatus = info.publishStatus === 1 ? 0 : 1
        }
      })
    },
    getList() {
      categoryList({ id: 0 }).then(res => {
        res.forEach((item, index) => {
          item.index = index
        })
        this.list0 = res
      })
    },
    setKey(arr) {
      this.addParams.pic = arr.length > 0 ? arr[0].zxfUrl : ''
      this.$refs.addForm.validateField('pic')
    },
    clickSure() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            addCategory(this.addParams).then(res => {
              this.$message.success('新增成功！')
              this.addDialog = false
              categoryList({ id: this.addParams.parentId }).then(res => {
                res.forEach((item, index) => {
                  item.index = index
                })
                if (this.chooseOpenDialog === 0) {
                  this.list0 = res
                } else if (this.chooseOpenDialog === 1) {
                  this.list1 = res
                } else if (this.chooseOpenDialog === 2) {
                  this.list2 = res
                } else {
                  this.list3 = res
                }
              })
            })
          } else {
            editCategory(this.addParams).then(res => {
              this.$message.success('编辑成功！')
              this.addDialog = false
              categoryList({ id: this.addParams.parentId }).then(res => {
                res.forEach((item, index) => {
                  item.index = index
                })
                if (this.chooseOpenDialog === 0) {
                  this.list0 = res
                } else if (this.chooseOpenDialog === 1) {
                  this.list1 = res
                } else if (this.chooseOpenDialog === 2) {
                  this.list2 = res
                } else {
                  this.list3 = res
                }
              })
            })
          }
        }
      })
    },
    openDialog(i, bool) {
      this.addParams = {
        parentId: '',
        code: '',
        fullCode: '',
        name: '',
        nav: '1',
        pic: '',
        remark: ''
      }
      this.fileList = []
      this.title = '新增'
      this.diabledEdit = bool
      this.chooseOpenDialog = i
      if (i === 0) {
        this.addParams.parentId = this.parentId0
      } else if (i === 1) {
        if (this.list0.length === 0) {
          this.$message.error('请先添加一级类目')
          return false
        }
        if (this.parentId1 === '') {
          this.$message.error('请先选择一级类目')
          return false
        }
        this.addParams.parentId = this.parentId1
      } else if (i === 2) {
        if (this.list1.length === 0) {
          this.$message.error('请先添加二级类目')
          return false
        }
        if (this.parentId2 === '') {
          this.$message.error('请先选择二级类目')
          return false
        }
        this.addParams.parentId = this.parentId2
      } else {
        if (this.list2.length === 0) {
          this.$message.error('请先添加三级类目')
          return false
        }
        if (this.parentId3 === '') {
          this.$message.error('请先选择三级类目')
          return false
        }
        this.addParams.parentId = this.parentId3
      }
      this.addDialog = true
    },
    chooseLv(i, index, info) {
      if (i === 0 && this.active0 !== index) {
        this.active0 = index
        this.active1 = -1
        this.active2 = -1
        this.active3 = -1
        this.list1 = []
        this.list2 = []
        this.list3 = []
        this.parentId2 = ''
        this.parentId3 = ''
        categoryList({ id: info.id }).then(res => {
          this.parentId1 = info.id
          res.forEach((item, index) => {
            item.index = index
          })
          this.list1 = res
        })
      } else if (i === 1 && this.active1 !== index) {
        this.active1 = index
        this.active2 = -1
        this.active3 = -1
        this.list2 = []
        this.list3 = []
        this.parentId3 = ''
        categoryList({ id: info.id }).then(res => {
          this.parentId2 = info.id
          res.forEach((item, index) => {
            item.index = index
          })
          this.list2 = res
        })
      } else if (i === 2 && this.active2 !== index) {
        this.active2 = index
        this.active3 = -1
        this.list3 = []
        categoryList({ id: info.id }).then(res => {
          this.parentId3 = info.id
          res.forEach((item, index) => {
            item.index = index
          })
          this.list3 = res
        })
      } else if (i === 3 && this.active3 !== index) {
        this.active3 = index
      }
    },
    edit(i, id, bool) {
      this.addParams = {
        parentId: '',
        code: '',
        fullCode: '',
        name: '',
        nav: '1',
        pic: '',
        remark: ''
      }
      this.title = '编辑'
      this.diabledEdit = bool
      this.chooseOpenDialog = i
      this.addParams.parentId = id
      this.fileList = []
      searchCategory({ id }).then(res => {
        this.fileList.push({
          url: res.pic
        })
        this.addParams = res
      })
      this.addDialog = true
    },
    del(i, info) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.chooseOpenDialog = i
        delCategory({ id: info.id }).then(res => {
          categoryList({ id: info.parentId }).then(res => {
            res.forEach((item, index) => {
              item.index = index
            })
            if (this.chooseOpenDialog === 0) {
              this.list0 = res
            } else if (this.chooseOpenDialog === 1) {
              this.list1 = res
            } else if (this.chooseOpenDialog === 2) {
              this.list2 = res
            } else {
              this.list3 = res
            }
            this.$message.success('删除成功')
          })
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style lang="scss">
.mall_goods-tool_good-category {
  .content {
    display: flex;
    justify-content: space-between;
    > div {
      width: 24%;
      background-color: #fff;
      // padding: 20px;
      .title, .filter {
        margin-bottom: 10px;
      }
      .filter-tree {
        height: 500px;
        overflow-y: scroll;
        .el-tree-node {
          margin: 3px 0;
        }
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #d1d1d1 !important;
          button {
            span {
              background-color: #d1d1d1;
            }
          }
        }
        .el-tree-node__content {
          .is-leaf {
            display: none !important;
          }
        }
        .tree-list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #606266;
          font-size: 13px;
          >div {
            display: flex;
          align-items: center;
            .el-button {
              margin-right: 5px;
              span {
                padding: 0 0 2px 0;
                display: inline-block;
              }
            }
          }
        }
      }
    }
    .el-switch {
      margin-right: 5px;
    }
    .el-switch__core {
      width: 24px !important;
      height: 12px;
    }
    .el-switch__core:after {
      width: 8px;
      height: 8px;
    }
    .el-switch.is-checked .el-switch__core::after {
      margin-left: -10px;
    }
  }
  .load-cont{
    .el-upload--picture-card{
      width: 80px;
      height: 80px;
      line-height:80px;
     }
    .el-upload-list__item{
      width: 80px;
      height: 80px;
    }
  }
}
</style>
